<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'addon.mod_scorm.toc' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <nav>
        <ion-list class="addon-mod_scorm-toc">
            @if (attemptToContinue) {
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <p>{{ 'addon.mod_scorm.dataattemptshown' | translate:{number: attemptToContinue} }}</p>
                    </ion-label>
                </ion-item>
            }
            @if (isBrowse) {
                <ion-item class="ion-text-center">
                    <ion-label>
                        <p>{{ 'addon.mod_scorm.browsemode' | translate }}</p>
                    </ion-label>
                </ion-item>
            }
            @if (isReview) {
                <ion-item class="ion-text-center">
                    <ion-label>
                        <p>{{ 'addon.mod_scorm.reviewmode' | translate }}</p>
                    </ion-label>
                </ion-item>
            }

            <!-- List of SCOs. -->
            <ng-container *ngFor="let sco of toc">
                @if (sco.isvisible) {
                    <ion-item [class]="['ion-text-wrap', 'core-padding-' + sco.level, 'addon-mod_scorm-type-' + sco.scormtype]"
                        [detail]="sco.prereq && sco.launch"
                        [attr.aria-current]="selected === sco.id ? 'page' : 'false'" (click)="loadSco(sco)"
                        [disabled]="!sco.prereq || !sco.launch ? true : null" [button]="sco.prereq && sco.launch">
                        @if (sco.icon) {
                            <ion-icon [name]="sco.icon.icon" [attr.aria-label]="sco.icon.description" slot="start" />
                        }
                        <ion-label>
                            <core-format-text [text]="sco.title" contextLevel="module" [contextInstanceId]="moduleId"
                                [courseId]="courseId" />
                            @if (accessInfo && accessInfo.canviewscores && sco.scoreraw) {
                                <span>
                                    ({{ 'addon.mod_scorm.score' | translate }}: {{sco.scoreraw}})
                                </span>
                                }
                        </ion-label>
                    </ion-item>
                    }
            </ng-container>
        </ion-list>
    </nav>
</ion-content>
